<script setup>
import { ClusterOutlined } from '@ant-design/icons-vue'
import { categoryData } from '~/logic'

const props = defineProps([
  'item',
])
</script>

<template>
  <div class="xcsj-bar-item">
    <div class="icon-box">
      <ClusterOutlined class="icon" style="color: #fff;" />
    </div>
    <div class="label">
      类目:
    </div>
    <div class="content">
      <a-tooltip>
        <template #title>
          {{ item.leafCategory ? categoryData[item.leafCategory] ? categoryData[item.leafCategory].path.join('>') : '~' : '官方暂无数据' }}
        </template>
        <span style="color: #000c17">
          {{
            item.leafCategory ? categoryData[item.leafCategory] ? categoryData[item.leafCategory].name : '~' : '官方暂无数据'
          }}
        </span>
      </a-tooltip>
    </div>
  </div>
</template>

<style scoped>
.content{
  font-size: 12px;
}
</style>
